<template>
  <div v-if="isShow" style="padding: 13px;box-shadow: 0 2px 12px 0 rgba(0,0,0,.2);border-radius: 8px;height: 290px">
    <el-carousel height="290px" :interval="5000" indicator-position="none">
      <el-carousel-item v-for="(item,index) in productList" :key="index">
        <count-chart1 v-if="index % 2 === 0" :product="item" />
        <count-chart2 v-else :product="item" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script>

import CountChart1 from './CountChart1'
import CountChart2 from './CountChart2'
import { getProductAndStatusCount } from '@/api/iot/iotDeviceBelongApi'
export default {
  name: 'GetProductAndStatusCount',
  components: {
    CountChart1,
    CountChart2
  },
  data() {
    return {
      isShow: true,
      productList: [],
      chart0: null,
      chart0Title: null,
      chart1: null,
      chart1Title: null,
      dataList: null
    }
  },
  created() {
    this.getProductAndStatusCount()
  },
  methods: {
    getProductAndStatusCount() {
      getProductAndStatusCount().then(res => {
        const { data, code } = res
        if (code === '200') {
          this.dataList = data
          this.initChart()
        }
      })
    },
    initChart() {
      const data = this.dataList
      if (data == null) {
        return
      }
      const productList = []
      for (const item of data) {
        let online = 0
        let offline = 0
        let unactive = 0
        let disable = 0
        let count = 0
        for (const item2 of item.statusList) {
          count = count + item2.num
          switch (item2.status) {
            case 'ONLINE':
              online = item2.num
              break
            case 'OFFLINE':
              offline = item2.num
              break
            case 'UNACTIVE':
              unactive = item2.num
              break
            case 'DISABLE':
              disable = item2.num
              break
          }
        }
        productList.push({
          name: item.name,
          online: online,
          offline: offline,
          unactive: unactive,
          disable: disable,
          count: count
        })
      }
      this.productList = productList
    }
  }
}
</script>


